<template>
  <a-upload
      :file-list="fileList"
      action="/"
      :list-type="listType"
      :openFileDialogOnClick="openFileDialogOnClick"
      @preview="handlePreview"
      @remove="handleRemove"
  >
    <div v-if="fileList.length < min" @click="selectImg" class="uploader">
      <plus-outlined />
      <div class="ant-upload-text">上传</div>
    </div>
  </a-upload>
  <!-- 预览图片 -->
  <a-modal
      :visible="state.previewVisible"
      :title="state.previewTitle"
      :footer="null"
      @cancel="handleCancel"
  >
    <img alt="example" style="width: 100%" :src="state.previewImage" />
  </a-modal>
  <!--选择图片-->
  <a-drawer
      v-model:visible="state.visible"
      title="选择图片"
      width="85%"
      :closable="false"
      :footer-style="{ textAlign: 'right' }"
      @close="onImgClose"
  >
    <oss-page
        ref="pageRef"
        is_select
        :is_more="true"
        :imgLimit="state.imgLimit"
        @GetSelectImg="GetSelectImg"
    />
    <template #footer>
      <a-button style="margin-right: 8px" @click="onImgClose">取消</a-button>
      <a-button type="primary" @click="onImgConfirm">确定</a-button>
    </template>
  </a-drawer>
</template>
<script setup>
import { PlusOutlined } from "@ant-design/icons-vue";
import { reactive, ref } from "vue";
import OssPage from "@/views/System/oss/index.vue";
const emit = defineEmits(["upload-img"]);

const props = defineProps({
  listType: {
    type: String,
    default: "picture-card",
  },
  fileList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  //   点击打开文件对话框
  openFileDialogOnClick: {
    type: Boolean,
    default: false,
  },
  min: {
    type: Number,
    default: 1,
  },
});

const pageRef = ref();

const state = reactive({
  previewVisible: false,
  visible: false,
  previewTitle: "",
  imgLimit: props.min, //最大可以选择xx张图片
  img: [],
});
// 预览
const handlePreview = async (file) => {
  if (!file.url && !file.preview) {
    file.preview = await getBase64(file.originFileObj);
  }
  state.previewImage = file.url || file.preview;
  state.previewVisible = true;
  state.previewTitle =
      file.name || file.url.substring(file.url.lastIndexOf("/") + 1);
};
// 删除
const handleRemove = (file) => {
  props.fileList?.forEach((item, index) => {
    if (item.uid === file.uid) {
      props.fileList.splice(index, 1);
    }
  });
};
const selectImg = () => {
  state.visible = true;
  getImgNum();
};
//计算图片限制
const getImgNum = () => {
  state.imgLimit = props.min - props.fileList.length;
};
const handleCancel = () => {
  state.previewVisible = false;
  state.previewTitle = "";
};
const onImgClose = () => {
  state.visible = false;
  state.img = [];
  pageRef.value?.clearImg();
  //重新计算可以选择xx张图片
  getImgNum();
};
const onImgConfirm = () => {
  state.visible = false;
  var imgs = [];
  state.img?.map(function (item, index) {
    imgs.push({ url: item });
  });
  emit("upload-img", imgs);
  pageRef.value?.clearImg();
  //重新计算可以选择xx张图片
  getImgNum();
};
const GetSelectImg = (item) => {
  state.img = item;
};
const getBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
};
</script>
<style scoped>
.uploader {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
